<template>
  <div>
    <hry-header title="充值" :showBackBtn="true">
      <div slot="content" class="withdraw">
        <md-notice-bar mode="closable" icon="volumn" type="activity" scrollable>
          尊敬的用户，信用卡功能因政策原因已停用。
        </md-notice-bar>
        <md-tabs>
          <md-tab-pane name="1" label="快捷充值">
            <div class="common-style"></div>
            <form novalidate @submit.prevent="rechangeOne">
              <div class="form-wrapper">
                <md-field>
                  <input-validate
                    type="money"
                    v-model="form.money"
                    title="充值金额(元)："
                    placeholder="请输入充值金额"
                    v-validate="'required|money'"
                    data-vv-value-path="innerValue"
                    data-vv-validate-on="input"
                    data-vv-as="充值金额"
                    name="money"
                    :error="errors.first('money')"
                  ></input-validate>
                  <md-field-item
                    style="height: 30pt;padding: 0"
                    title="支付银行卡:"
                    :content="form.bankName"
                    @click="showSelector"
                    arrow
                    solid
                  />
                  <md-input-item
                    ref="input0"
                    type="money"
                    v-model="form.realMoney"
                    title="支付金额(元)："
                    placeholder="请输入支付金额"
                    readonly
                  ></md-input-item>
                  <input-validate
                    type="password"
                    title="支付密码："
                    v-model="form.password"
                    placeholder="请输入支付密码"
                    v-validate="'required'"
                    data-vv-value-path="innerValue"
                    data-vv-validate-on="input"
                    data-vv-as="支付密码"
                    name="password"
                    :error="errors.first('password')"
                  ></input-validate>
                </md-field>
                <md-selector
                  v-model="isSelectorShow"
                  :default-value="defaultBankId"
                  :data="data"
                  max-height="320px"
                  title="支付银行卡"
                  @choose="onSelectorChoose"
                ></md-selector>
                <div style="text-align: center">
                  <a-button
                    type="primary"
                    :disabled="
                      data.length === 0 || !isSetPay || disabled ? true : false
                    "
                    block
                    html-type="submit"
                    >确认充值</a-button
                  >
                  <span class="alarm-text">注：最低充值金额100元</span><br />
                  <span
                    v-if="!isMobile"
                    class="text-warning"
                    @click="$commonJs.goPage('personResetAthPhone')"
                    >您尚未认证手机，暂不能快捷充值，点击去设置</span
                  >
                  <span
                    v-if="isMobile && !isSetPay"
                    class="text-warning"
                    @click="$commonJs.goPage('personResetPayPsw')"
                    >您尚未设置支付密码，暂不能快捷充值，点击去设置</span
                  >
                </div>
              </div>
            </form>
          </md-tab-pane>
          <md-tab-pane name="2" label="网银充值">
            <div class="common-style"></div>
            <form novalidate @submit.prevent="rechangeTwo">
              <div class="form-wrapper">
                <md-field>
                  <input-validate
                    type="money"
                    v-model="netForm.money"
                    title="充值金额(元)："
                    placeholder="请输入充值金额"
                    v-validate="'required|money'"
                    data-vv-value-path="innerValue"
                    data-vv-validate-on="input"
                    data-vv-as="充值金额"
                    name="netmoney"
                    :error="errors.first('netmoney')"
                  ></input-validate>
                  <md-field-item
                    style="height: 30pt;padding: 0"
                    title="充值银行:"
                    :content="netForm.bank"
                    @click="showBank"
                    arrow
                    solid
                  />
                  <md-input-item
                    ref="input0"
                    type="money"
                    v-model="netForm.realMoney"
                    title="支付金额(元)："
                    placeholder="请输入支付金额"
                    readonly
                  ></md-input-item>
                </md-field>
                <md-selector
                  v-model="isShowBank"
                  default-value="01021"
                  :data="bankList"
                  max-height="320px"
                  title="选择充值银行"
                  @choose="onSelectorBank"
                >
                </md-selector>
                <div style="text-align: center">
                  <a-button type="primary" block html-type="submit"
                    >下一步</a-button
                  >
                  <span class="alarm-text">注：最低充值金额100元</span>
                </div>
              </div>
            </form>
          </md-tab-pane>
        </md-tabs>
      </div>
    </hry-header>
  </div>
</template>

<script>
import {
  InputItem,
  Field,
  Selector,
  FieldItem,
  Tabs,
  TabPane,
  NoticeBar
} from "mand-mobile";
import inputValidate from "@/components/input-validate/index";
import validate from "@/tool/validateFunction";
import bankList from "@/tool/connectBank";
validate.money("money", "最低充值金额100元");
export default {
  name: "recharge",
  components: {
    inputValidate,
    [NoticeBar.name]: NoticeBar,
    [InputItem.name]: InputItem,
    [Selector.name]: Selector,
    [Field.name]: Field,
    [FieldItem.name]: FieldItem,
    [Tabs.name]: Tabs,
    [TabPane.name]: TabPane,
    hryHeader: () => import("@/components/contentWrapper/index")
  },
  data() {
    return {
      bankList,
      isShowBank: false,
      isSelectorShow: false,
      defaultBankId: "",
      data: [],
      form: {
        money: null,
        realMoney: null,
        bankName: "",
        bankId: "",
        password: ""
      },
      netForm: {
        money: null,
        realMoney: null,
        bank: "工商银行",
        bankCode: "01021"
      },
      disabled: false
    };
  },
  methods: {
    showBank() {
      this.isShowBank = true;
    },
    showSelector() {
      this.isSelectorShow = true;
    },
    onSelectorBank({ value, text }) {
      this.netForm.bankCode = value;
      this.netForm.bank = text;
    },
    onSelectorChoose({ text, value }) {
      this.form.bankName = text;
      this.form.bankId = value;
    },
    rechangeOne() {
      let obj = {
        money: this.form.money,
        password: this.form.password
      };
      this.$validator.validateAll(obj).then(result => {
        if (result) {
          this.disabled = true;
          this.$ajax
            .post(
              this.$api.createRechargeOrder,
              {
                money: this.form.money,
                bank_id: this.form.bankId,
                pay_money: this.form.realMoney,
                pay_password: this.form.password
              },
              false,
              "创建支付订单中..."
            )
            .then(res => {
              this.disabled = false;
              this.$commonJs.goPage("personPay", res.data.order_id);
            })
            .catch(err => {
              this.disabled = false;
              this.$message.error(err);
            });
        }
      });
    },
    rechangeTwo() {
      this.disabled = true;
      this.$validator.validate("netmoney").then(result => {
        if (result) {
          this.$ajax
            .post(
              this.$api.getWayPay,
              {
                money: this.netForm.money,
                bank_code: this.netForm.bankCode
              },
              false,
              "即将跳转"
            )
            .then(res => {
              this.disabled = false;
              window.location.href = res.data.url;
            })
            .catch(err => {
              this.disabled = false;
              this.$message.error(err);
            });
        } else {
          this.disabled = false;
        }
      });
    },
    getBankList() {
      this.$ajax
        .post(this.$api.rechargeBankList, {
          type: 1
        })
        .then(res => {
          this.formatData(res.data.card_list);
        })
        .catch(err => {
          this.$message.error(err);
        });
    },
    formatData(data) {
      data.forEach(item => {
        let obj = {};
        obj.text = item.bank_number + "【" + item.bank_name + "】";
        obj.value = item.id;
        this.data.push(obj);
      });
      if (data.length > 0) {
        this.defaultBankId = this.data[0].value;
        this.form.bankName = this.data[0].text;
        this.form.bankId = this.data[0].value;
      }
    }
  },
  created() {
    this.getBankList();
  },
  watch: {
    "form.money": function(value) {
      let money = parseFloat(value);
      if (money < 200) {
        this.form.realMoney = money + 1;
      } else {
        this.form.realMoney = (money + money * 0.005).toFixed(2);
      }
    },
    "netForm.money": function(value) {
      let money = parseFloat(value);
      if (money < 200) {
        this.netForm.realMoney = money + 1;
      } else {
        this.netForm.realMoney = (money + money * 0.005).toFixed(2);
      }
    }
  },
  computed: {
    isMobile() {
      return this.$store.state.isMobile;
    },
    isSetPay() {
      return this.$store.state.isSetPay;
    }
  }
};
</script>

<style scoped lang="less">
.form-wrapper {
  padding: 0 62px;
  .ant-btn {
    margin-top: 117px;
    height: 75px;
    font-size: 30px;
    margin-bottom: 20px;
  }
  .bank {
    font-size: 27px;
    img {
      width: 36px;
      margin-right: 18px;
      vertical-align: middle;
    }
  }
  .text-warning {
    font-size: 20px;
    display: inline-block;
    margin-top: 39px;
  }
}
</style>
